<template>
  <div>
    <div :id="id" style="height: 100%"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    props: {
      id: {
        type: String,
        required: true,
      },
      legendData: { // 图例标题
        type: Array,
        default: ['1', '2']
      },
      indicator: { // 最大范围和标签项
        type: Array,
        default: [{
              text: '1',
              max: 6000,
          },
          {
              text: '2',
              max: 5000
          },
          {
              text: '3',
              max: 5000
          },
          {
              text: '4',
              max: 5000,
              //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
          },
          {
              text: '5',
              max: 5000
          },
          {
              text: '6',
              max: 5000
          },
          {
              text: '7',
              max: 5000,
              //  axisLabel: {show: true, textStyle: {fontSize: 18, color: '#333'}}
          },
          {
              text: '8',
              max: 5000
          },
          {
              text: '9',
              max: 5000
          }
        ]
      },
      colorArr: { // 颜色
        type: Array,
        default: ['#FF123E', '#00D8FF']
      },
      radarValue: {  // 数据
        type: Array,
        default: [[4300, 4700, 3600, 3900, 3800, 4200, 4300, 4700, 3600], [3200, 3000, 3400, 2000, 3900, 2000, 3200, 3000, 3400]]
      }
    },
    mounted() {
      let mCharts = echarts.init(document.querySelector(`#${this.id}`))
      let dataArr = []
      this.radarValue.map((item, index) => {
        dataArr.push({
            value: item,
            name: this.legendData[index],
            // itemStyle: {
            //     normal: {
            //         lineStyle: {
            //             color: '#FF123E',
            //             // shadowColor: '#4A99FF',
            //             // shadowBlur: 10,
            //         },
            //         shadowColor: '#FF123E',
            //         shadowBlur: 10,
            //     },
            // },
            areaStyle: {
              normal: { // 单项区域填充样式
                  color: {
                      type: 'linear',
                      x: 0, //右
                      y: 0, //下
                      x2: 1, //左
                      y2: 1, //上
                      colorStops: [{
                          offset: 0,
                          color: this.colorArr[index]
                      }, {
                          offset: 0.5,
                          color: 'rgba(0,0,0,0)'
                      }, {
                          offset: 1,
                          color: this.colorArr[index]
                      }],
                      globalCoord: false
                  },
                  opacity: 1 // 区域透明度
              }
          }
        })
      })
      // var colorArr = ['#FF123E', '#00D8FF']; // 圆点颜色
      let option = {
          color: this.colorArr,
          legend: {
              orient:'horizontal',
              icon: 'diamond', //图例形状
              data: this.legendData,
              bottom: 0,
              right: 20,
              itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
              itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
              itemGap: 150, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
              textStyle: {
                  fontSize: 14,
                  color: '#CCDFFF',
              },
          },
          radar: {
              // shape: 'circle',
              name: {
                  textStyle: {
                      color: '#fff',
                      fontSize: 14
                  },
              },
              indicator: this.indicator,
              splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                  show: true,
                  areaStyle: { // 分隔区域的样式设置。
                      color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                  }
              },
              axisLine: { //指向外圈文本的分隔线样式
                  lineStyle: {
                      color: '#1D6B86'
                  }
              },
              splitLine: {
                  lineStyle: {
                      color: '#1D6B86', // 分隔线颜色
                      width: 1, // 分隔线线宽
                  }
              },
          },
          series: [{
              type: 'radar',
              symbolSize: 8,
              // symbol: 'angle',
              data: dataArr
          }]
      };

      mCharts.setOption(option)
    }
  }
</script>

<style lang="less" scoped>

</style>